/* stylelint-disable no-descending-specificity */
@include b(pagination) {
  #{getCssVarName(editor, hover, border-color)}: var(#{getCssVarName(color, text, 0)});
  padding: getCssVar('spacing', 'tight') getCssVar(spacing, base-tight);

  &.#{bem('pagination')} {
    height: auto;
  }

  .el-pagination {
    &.is-background {
      .btn-next,
      .btn-prev,
      .el-pager li {
        margin: 0 getCssVar('spacing', 'extra-tight');
        background-color: var(--el-pagination-button-bg-color);
      }

      .btn-prev {
        margin-left: getCssVar('spacing', 'base');
      }


      .btn-next.is-disabled,
      .btn-next:disabled,
      .btn-prev.is-disabled,
      .btn-prev:disabled,
      .el-pager li.is-disabled,
      .el-pager li:disabled {
        background-color: getCssVar(color, disabled, bg);
      }
    }

    .btn-next,
    .btn-prev,
    .el-pager li {
      min-width: getCssVar('height-control', 'default');
      height: getCssVar('height-control', 'default');
      font-size: getCssVar('font-size', 'regular');
      line-height: getCssVar('height-control', 'default');
      border: none;
    }

    .el-pager.el-pager li.is-active {
      color: getCssVar(color, white);
      background-color: getCssVar(color, primary);
    }

    .el-select .el-input {
      width: 115px;
    }

    .el-input__wrapper {
      padding: 1px getCssVar('spacing', 'tight');
    }

    .el-pagination__jump .el-pagination__editor,
    .el-table__border-left-patch,
    .el-pagination__sizes {
      border: none;
    }

    .el-pagination__sizes .el-select .el-input__wrapper,
    .el-pagination__jump .el-pagination__editor .el-input__wrapper {
      background-color: getCssVar(color, bg, 2);
      box-shadow: 0 0 0 1px getCssVar('color', 'border') inset;

      &.is-focus {
        box-shadow: 0 0 0 1px getCssVar('color', 'primary') inset !important;
      }
    }
  }
}